<template>
  <view class="animated fadeIn faster page-bg">
    <view class="px-3 d-flex d-flex-middle mb-3 pt-1" @click="goUrl()">
      <image :src="avatar" class="rounded mr-2" style="width: 120rpx;height: 120rpx;background-color: #ffffff;">
      </image>
      <view class="d-flex-item">
        <!--   <view class="d-flex d-flex-middle">
          <text class="font36 color000 font-bold text-clamp"  style="width: 260rpx">{{ nickName }}</text>
          <text class="font26 colorFC6127 mx-1">{{ unions_name }}</text>
     </view> -->
        <view class="color000 mb-1">
          <view class="font-bold font32 d-flex d-flex-middle d-flex-wrap">{{ nickName }}
            <view @click="toggleOnline" v-if="isOnline"
                  class="ml-1 font26 color598dfc mt-1 text-center font-bold">
              <text class="iconfont icon-shangxian"></text>
              在线
            </view>
            <view @click="toggleOnline" v-else class="font26 mt-1 ml-1 color999 text-center font-bold">
              <text class="iconfont icon-xiaxian1"></text>
              下线
            </view>
          </view>
          <text v-if="unions_name" class="font26 colorFC6127 mx-1 ">{{ unions_name }}</text>
        </view>
        <view class="mt-1 d-flex d-flex-middle d-flex-between" @click="copypw(phone)">
          <text class="mr-1">{{ phone }}</text>
          <image style="width: 6%;" mode="widthFix"
                 src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/strike.png"></image>
        </view>
      </view>
    </view>

    <view class="d-flex py-2 d-flex-item d-flex-center">
      <view class="text-center btn bgcolor598dfc  rounded20 colorfff font28 mr-10"
            @click="goUrl('/subPages/mySkill/mySkill')">大神认证
      </view>
      <view class="text-center btn bgcolor598dfc  rounded20 colorfff font28"
            @click="goUrl('/subPages/grabOrders/grabOrders')">进入抢单大厅
      </view>
    </view>

    <view class="pb-2 mx-2 pt-3">
      <view class="p-3 mycheck">
        <view class="d-flex d-flex-middle mb-2">
          <text class="font-bold font30">我的接单</text>
        </view>
        <view class="d-flex mb-1">
          <view class="d-flex d-flex-item d-flex-column d-flex-center d-flex-middle"
                v-for="(item,index) in orderList" :key="item+'1'"
                @click="goUrl(`/subPages/orderList/orderList?order_type=2&player_order_status=${item.player_order_status}`)">
            <text v-if="item.type==2">{{ orderMyList.service_count }}</text>
            <text v-if="item.type==1">{{ orderMyList.wait_confirm_count }}</text>
            <text v-if="item.type==3">{{ orderMyList.completed_count }}</text>
            <text class="font26 mt-1">{{ item.text }}</text>
          </view>
        </view>
      </view>
    </view>


    <view class="pb-2 mx-2">
      <view class="p-3 mycheck">
        <view class="d-flex d-flex-middle mb-2 d-flex-between">
          <text class="font-bold font30">我的资金</text>
          <view class="d-flex">
            <view class="text-center px-2 fundBtn bgcolor598dfc  rounded20 colorfff font22 mr-4"
                  @click="goUrl('/subPages/withdrawList/withdrawList')">收支明细
            </view>
            <view class="text-center px-2 fundBtn bgcolor00bf0d rounded20 colorfff font22"
                  @click="openWithdrawPopup">
              申请提现
            </view>
          </view>
        </view>
        <view class="d-flex mb-1 pt-2">
          <text class="font26 mt-1">可提现余额:
            <text class="font32 colorf00 px-1">{{ orderMyList.agent_balance }}</text>
            元
          </text>
        </view>
      </view>
    </view>

    <view class="pb-2 mx-2">
      <view class="p-3 mycheck">
        <view class="d-flex d-flex-middle mb-2">
          <text class="font-bold font30">保证金</text>
          <view class="px-2 colorf00 font30 ml-3">¥{{ bzj.bond }}元</view>
          <view class="px-2  font24 ml-3">（基础保证金，可接3单）</view>
        </view>
        <view class="d-flex mb-1 pt-2 mx-5"
              @click="goUrl(  `/subPages/marginDeposit/marginDeposit?bond=${bzj.bond}`)">
          <view class="d-flex-item text-center px-2 py-1 bgcolor598dfc rounded20 colorfff font28">缴纳保证金</view>
        </view>
      </view>
    </view>

    <view class="pb-2 mx-2">
      <view class="p-3 mycheck">
        <view class="d-flex d-flex-middle mb-2">
          <text class="font-bold font30">会费</text>
          <view class="px-2 colorf00 font30 ml-3">¥{{ orderMyList.union_price }}元</view>
        </view>
        <view class="d-flex mb-1 pt-2 d-flex-column">
          <view class="mx-5 d-flex-item text-center px-2 py-1 bgcolor598dfc rounded20 colorfff font28"
                @click="openUnion">
            缴纳会费
          </view>
          <text class="font22 colorf00 mt-1">说明:缴纳会费可获得评测、主播推荐等一系列政策倾斜</text>
        </view>
      </view>
    </view>

    <uni-popup ref="payPopup" :safe-area="false" @touchmove.stop.prevent="moveHandle" type="bottom"
               style="position: relative;z-index: 999991;">
      <view class="wrap">
        <view class="py-3 d-flex d-flex-between d-flex-middle mb-3">
          <view style="width: 150rpx;"></view>
          <text class="font30 color000">立即支付</text>
          <view class="d-flex d-flex-middle d-flex-end pr-3" style="width: 120rpx;">
            <text class="iconfont icon-cuo font30 color999" @click="closePayPopup"></text>
          </view>
        </view>
        <view class="pb-4">
          <!-- #ifndef MP-WEIXIN -->
          <view class="d-flex d-flex-between d-flex-middle px-3 mb-4" @click="changePay(1)">
            <view class="d-flex d-flex-middle">
              <image class="rounded"
                     src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228140259-f541dd69-c75e-43ad-a9e9-7aa92250dc3c.png"
                     style="width: 50rpx;height: 50rpx;"></image>
              <text class="ml-1">微信支付</text>
            </view>
            <text class="iconfont font36"
                  :class="payType == 1?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
          </view>
          <view class="d-flex d-flex-between d-flex-middle px-3 mb-4" @click="changePay(2)">
            <view class="d-flex d-flex-middle">
              <image class="rounded"
                     src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228135921-cfaf5d4f-f4f2-4978-988d-5a1c9b0e7b96.png"
                     style="width: 50rpx;height: 50rpx;"></image>
              <text class="ml-1">支付宝支付</text>
            </view>
            <text class="iconfont font36"
                  :class="payType == 2?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
          </view>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <view class="d-flex d-flex-between d-flex-middle px-3 mb-4" @click="changePay(1)">
            <view class="d-flex d-flex-middle">
              <image class="rounded"
                     src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228140259-f541dd69-c75e-43ad-a9e9-7aa92250dc3c.png"
                     style="width: 50rpx;height: 50rpx;"></image>
              <text class="ml-1">微信支付</text>
            </view>
            <text class="iconfont font36"
                  :class="payType == 1?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
          </view>
          <!-- #endif -->
          <view class="d-flex d-flex-between d-flex-middle px-3 mb-5" @click="changePay(2)">
            <view class="d-flex d-flex-middle">
              <image class="rounded"
                     src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/pay_wap.png"
                     style="width: 50rpx;height: 50rpx;"></image>
              <text class="ml-1 mr-1">余额支付</text>
              <text class="font22 colorhold">￥{{ balance }}</text>
            </view>
            <text class="iconfont font36"
                  :class="payType == 2?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
          </view>
          <view class="px-5">
            <view style="height: 70rpx;border-radius: 50rpx;"
                  class="bg-main d-flex d-flex-center d-flex-middle" @click="confirmPay">
              <text class="font30 colorfff">确认支付</text>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 提现申请弹窗 -->
    <uni-popup ref="withdrawPopup" type="center" :mask-click="false">
      <view class="withdraw-popup">
        <view class="popup-header">
          <text class="font32 font-bold">申请提现</text>
          <text class="iconfont icon-cuo close-btn" @click="closeWithdrawPopup"></text>
        </view>
        <view class="popup-content">
          <view class="form-item">
            <text class="label">可提现余额</text>
            <text class="value colorf00">¥{{ orderMyList.agent_balance }}</text>
          </view>
          <view class="form-item">
            <text class="label">提现金额</text>
            <input class="input" type="digit" v-model="withdrawForm.price" placeholder="请输入提现金额"
                   placeholder-class="placeholder-class"/>
          </view>

        </view>
        <view class="popup-footer">
          <button class="cancel-btn" @click="closeWithdrawPopup">取消</button>
          <button class="confirm-btn" @click="submitWithdraw">确认提现</button>
        </view>
      </view>
    </uni-popup>

    <view class="fab  d-flex" @click="goUrl('/subPages/recommendList/recommendList')">
      <image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/apps.org.mozilla.browserquest.png"
             class="fab-img mr-1"></image>
      <text>打手榜</text>
    </view>
  </view>
</template>

<script>
import {
  mapState
} from "vuex"
import {
  payApi
} from '@/http/payApi';
import pay from '@/mixins/pay.js'

export default {
  mixins: [pay],
  data() {
    return {
      orderList: [{
        text: '待开始',
        player_order_status: 1,
        type: 1
      },
        {
          text: '服务中',
          player_order_status: 2,
          type: 2
        },
        {
          text: '已完成',
          player_order_status: 4,
          type: 3
        },
      ],
      orderType: 0,
      orderMyList: {
        service_count: 0,
        wait_confirm_count: 0,
        completed_count: 0,
        agent_balance: '0',
        union_price: '0',
      },
      withdrawForm: {
        price: '',
      },
      selectedMethod: {},
      bzj: {},
      payType: 1,
      isOnline: false,
    }
  },
  computed: {
    ...mapState({
      balance: state => state.balance,
      nickName: state => state.nickName,
      phone: state => state.phone,
      avatar: state => state.avatar,
      user_id: state => state.id,
      loginState: state => state.loginState,
      unions_name: state => state.unions_name,
      assess_type: state => state.assess_type,
      id_card: state => state.id_card,
      real_name: state => state.real_name,
      online_status: state => state.online_status,
    })
  },
  onShow() {
    if (this.online_status == 1) {
      this.isOnline = true
    } else {
      this.isOnline = false
    }
    this.orderMy()
  },
  methods: {
    async orderMy() {
      let res = await payApi.getOrderMy()
      this.orderMyList = res
      let res2 = await payApi.getDeposit()
      this.bzj = res2
    },
    changePay(number) {
      this.payType = number
    },
    async openUnion(type) {
      try {
        // 如果传入了类型参数，则同时打开支付方式弹窗
        if (type) {
          this.orderType = type;
          this.$refs.payPopup.open();
        }

      } catch (error) {
        uni.showToast({
          title: '获取失败',
          icon: 'none'
        });
      }
    },
    async confirmPay() {
      let that = this
      try {
        uni.showLoading({
          title: '订单创建中...'
        })
        // 会费订单
        const order = await payApi.getUnions()
        uni.hideLoading()
        if (order) {
          that.clientTransferPay(order, false,'assess' )
        }
      } catch (error) {
        console.log('error', error)
      }
    },
    moveHandle() {
      return false
    },
    goUrl(urlPages) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }, 1500)
      } else {
        uni.navigateTo({
          url: urlPages
        })
      }
    },

    copypw(item) {
      uni.setClipboardData({
        data: `手机号码：${item}`,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      })
    },
    // 显示提现弹窗
    async openWithdrawPopup() {

      // 如果是受保护的路由且未实名认证，则跳转到实名认证页面
      if (!(this.real_name && this.id_card)) {
        uni.navigateTo({
          url: '/subPages/realName/realName'
        })
        return
      }

      let res = await payApi.getWithdrawStatus()
      if (res.status == 2) {
        let res1 = await payApi.getWithdraw({price: res.amount});
        let that = this;
        uni.requestMerchantTransfer({
          mchId: "1724161118",
          appId: "wx117e34b09e4aa016",
          package: res1.package_info,
          success(res) {
            console.log('success:', res);
            that.close()
          },
          fail(error) {
            that.close()
            console.log('fail:', res);
          },
        });
      } else {
        if (res.status == 3) {
          uni.showToast({
            title: `已拒绝，${res.remark}`,
            icon: 'none'
          });
          setTimeout(() => {
            this.withdrawForm = {
              price: '',
            };
            this.selectedMethod = {};
            this.$refs.withdrawPopup.open();
          }, 1500)
        } else if (res.status == 1) {
          uni.showToast({
            title: '审核已提交，请等待管理员审核',
            icon: 'none'
          });
        } else {
          this.withdrawForm = {
            price: '',
          };
          this.selectedMethod = {};
          this.$refs.withdrawPopup.open();
        }
      }

    },
    // 关闭提现弹窗
    closeWithdrawPopup() {
      this.$refs.withdrawPopup.close();
    },
    closePayPopup() {
      this.$refs.payPopup.close()
    },
    async toggleOnline() {
      let that = this;
      uni.showModal({
        title: '提示',
        content: that.isOnline ? '确认下线' : '确认上线',
        showCancel: true,
        success: async function (res) {
          if (res.confirm) {
            that.isOnline = !that.isOnline
            let ress = await userApi.peopleOnline()
            const userData = await userApi.getUserInfo();
            store.commit('setUserInfo', userData);
          }
        }
      });
    },
    // 提交提现申请
    async submitWithdraw() {
      // 简单验证
      if (!this.withdrawForm.price) {
        uni.showToast({
          title: '请输入提现金额',
          icon: 'none'
        });
        return;
      }
      // 验证输入是否为有效数字
      const price = parseFloat(this.withdrawForm.price);

      // 检查是否为有效数字
      if (isNaN(price)) {
        uni.showToast({
          title: '请输入有效的数字',
          icon: 'none'
        });
        return;
      }

      const balance = parseFloat(this.orderMyList.agent_balance);

      if (price > balance) {
        uni.showToast({
          title: '提现金额不能超过可提现余额',
          icon: 'none'
        });
        return;
      }

      if (price <= 0) {
        uni.showToast({
          title: '提现金额必须大于0',
          icon: 'none'
        });
        return;
      }

      // 调用提现接口
      uni.showLoading({
        title: '提交中...'
      });

      try {
        let res = await payApi.withdrawSubmit(this.withdrawForm);
        console.log(res, '1111')
        // let res = await payApi.getWithdraw(this.withdrawForm);
        uni.hideLoading();

        uni.showToast({
          title: '等待管理审核',
          icon: 'success'
        });
        this.closeWithdrawPopup();
        // 重新获取余额信息
        this.orderMy();
      } catch (error) {
        console.log(error, '555')
        uni.hideLoading();
        this.closeWithdrawPopup();
        uni.showToast({
          title: error.msg,
          icon: 'none'
        });
        console.error('提现失败:', error);
      }
    }

  }
}
</script>

<style scoped>
.colorff7f02 {
  color: #ff7f02;
}

.color598dfc {
  color: #598dfc;
}

.bgcolor598dfc {
  background-color: #598dfc;
}

.d-justify-item {
  justify-items: center;
}

.btn {
  width: 220rpx;
  height: 70rpx;
  line-height: 70rpx;
  display: inline-block;
}

.mr-10 {
  margin-right: 120rpx;
}

.mycheck {
  border-radius: 20rpx;
  background-color: #fff
}

.fundBtn {
  padding-top: 6rpx;
  padding-bottom: 6rpx;
}

.bgcolor00bf0d {
  background-color: #00bf0d;
}

.colorFC6127 {
  color: #ff7f02;
}

/* 提现弹窗样式 */
.withdraw-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  padding: 30rpx;
  text-align: center;
  position: relative;
  border-bottom: 2rpx solid #f0f0f0;
}

.close-btn {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36rpx;
  color: #999;
}

.popup-content {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #333;
}

.input {
  width: 100%;
  height: 70rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.picker {
  width: 100%;
  height: 70rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  font-size: 28rpx;
  line-height: 70rpx;
  box-sizing: border-box;
}

.placeholder-class {
  color: #ccc;
}

.value {
  font-size: 32rpx;
  font-weight: bold;
}

.popup-footer {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  border-top: 2rpx solid #f0f0f0;
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  height: 70rpx;
  border-radius: 35rpx;
  font-size: 28rpx;
  border: none;
}

.cancel-btn {
  background: #f0f0f0;
  color: #666;
  margin-right: 20rpx;
}

.confirm-btn {
  background: #598dfc;
  color: #fff;
  margin-left: 20rpx;
}


.fab {
  position: fixed;
  right: 15px;
  top: 136px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 35px;
  background: #cddc39;
  background-size: 400% 400%;
  animation: float 4s ease-in-out infinite;
  border-radius: 30px;
  z-index: 11;
  font-size: 14px;
  color: #000000;
  box-shadow: 0 3px 0 rgb(170, 157, 66)
}

.fab-img {
  width: 40rpx;
  height: 40rpx;
}

@keyframes goldShine {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0px);
  }
}
</style>